<template>
  <div class="container flex-box">
    <div class="main-container flex-item">
      <div class="search-form">
        <div class="search-form__common">
          <!-- 常规搜索 -->
          <div>
            <el-form :model="searchForm" ref="searchForm" label-width="90px" label-position="right" size="small">
              <el-row :gutter="30">
                <el-col :span="8">
                  <el-input style="width:100%" clearable v-model="searchForm.keywords" placeholder="输入候选人姓名或手机号查询" size="small">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                  </el-input>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="岗位">
                    <el-select v-model="searchForm.post" style="width: 100%" size="small">
                      <el-option value="1" label="岗位1"></el-option>
                      <el-option value="2" label="岗位2"></el-option>
                      <el-option value="3" label="岗位3"></el-option>
                      <el-option value="4" label="岗位4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-button type="blue" size="small" class="ml-20" @click="doSearch">搜索</el-button>
                  <el-button size="small" type="normal" class="ml-20" @click="searchAdvancedVisable=true" v-if="!searchAdvancedVisable" icon="icon icon-arr-down">高级搜索</el-button>
                  <el-button size="small" type="normal" class="ml-20" @click="searchAdvancedVisable=false" v-if="searchAdvancedVisable" icon="icon icon-arr-up">返回常规搜索</el-button>
                </el-col>
              </el-row>
              <el-row :gutter="30">
                <el-col :span="8">
                  <el-form-item label="流程状态">
                    <el-select v-model="searchForm.process" style="width: 100%" size="small">
                      <el-option value="1" label="待处理"></el-option>
                      <el-option value="2" label="处理中"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="当前步骤">
                    <el-select v-model="searchForm.step" style="width: 100%" size="small">
                      <el-option value="1" label="全部"></el-option>
                      <el-option value="2" label="面试中"></el-option>
                      <el-option value="3" label="offer中"></el-option>
                      <el-option value="4" label="已offer"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="单据类型">
                    <el-select v-model="searchForm.type" style="width: 100%" size="small">
                      <el-option value="1" label="面试流程"></el-option>
                      <el-option value="2" label="面试流程"></el-option>
                      <el-option value="3" label="面试流程"></el-option>
                      <el-option value="4" label="面试流程"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <transition name="el-zoom-in-top">
              <m-searchAdvanced v-if="searchAdvancedVisable"></m-searchAdvanced>
            </transition>
          </div>
          <!-- 高级搜索 -->
        </div>
         <!-- 设置按钮 -->
        <div class="table-setting" @click="doSetting('other')">
          <i class="icon icon-setting"></i>
        </div>
      </div>
     
      <div class="layout-table mt-10">
        <m-dataTable ref="dataTable"></m-dataTable>
      </div>
    </div>
    <div class="right-side post" :class="{'is-fixed': isFixed}">
      <!-- 返回顶部 -->
      <div class="back-top" @click="backTop">
        <i class="icon icon-backtop"></i>
      </div>
    </div>

    <!-- 设置弹窗 -->
    <dialog-setting :visible.sync="dialogSettingVisable" :settingType="settingType" 
      @changeActive="changeSettingActive"></dialog-setting>
  </div>
</template>

<script>
import DataTable from './components/dataTable'
import {Input, Select, Option, Button, Row, Col, Form, FormItem} from 'element-ui'
import MSearchAdvanced from './components/searchAdvanced'
  export default {
    components: {
      [Input.name]: Input,
      [Select.name]: Select,
      [Option.name]: Option,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Form.name]: Form,
      [FormItem.name]: FormItem,
      'm-dataTable': DataTable,
      'dialog-setting': () => import('./components/setting'), //设置弹窗
      'm-searchAdvanced': MSearchAdvanced
    },
    data () {
      return {
        searchForm: {},
        searchAdvancedVisable: false,
        settingType: '',
        dialogSettingVisable: false,
        isFixed: false
      }
    },
    created() {
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/post') == 0){
          this.initSticky()
        }
      })
    },
    methods: {
      initSticky() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
        } else {
          this.isFixed = false
        }
      },
      doSearch() {

      },
      backTop() {
        window.scroll(0,0)
      },
      doSetting(type) {
        this.settingType = type
        this.dialogSettingVisable = true
      },
      changeSettingActive(val) {
        this.settingType = val
      },
    }
  }
</script>

<style lang="scss" scoped>
  .right-side{
    width: 220px;
    margin-top: 28px;
  }
  .right-side.post{
    width: 80px;
  }
  .back-top{
    right: 25px;
  }
</style>
